@keyframes diceBOX{
    from{

    }
    50%{
        transform: rotateY(100deg) rotateX(800deg);
    }
    to{
        transform: rotateY(360deg) rotateX(360deg);
    }
}
.diceBox{
    width: 500px;
    height: 500px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(300deg) rotateX(45deg);
    animation:diceBOX 5s infinite ;
}
.dice{
    width: 160px;
    height: 160px;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    border-radius: 10px;
    display: flex;
    background-color: rgb(75, 54, 54);
}
.son{
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
}
.diceBox > div:first-child{
    justify-content: center;
    align-items: center;
    transform: translateZ(100px);
    
}
.diceBox > div:nth-child(2){
    justify-content: space-between;
    transform: translateZ(-100px);
}
.diceBox > div:nth-child(2) .row{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.diceBox > div:nth-child(3){
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform: rotateY(90deg) translateZ(-100px);
}
.diceBox > div:nth-child(4){
    transform: rotateY(90deg) translateZ(100px);
    justify-content: space-between;
}
.diceBox > div:nth-child(4) .row{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.diceBox > div:nth-child(4) .row:nth-child(2){
    justify-content: center;
}
.diceBox > div:nth-child(5){
    transform: rotateX(90deg) translateZ(100px);
    justify-content: space-between;
}
.diceBox > div:nth-child(5) .son:nth-child(2){
    align-self: center;
}
.diceBox > div:nth-child(5) .son:nth-child(3){
    align-self: flex-end;
}
.diceBox > div:nth-child(6){
    transform: rotateX(90deg) translateZ(-100px);
    justify-content: space-between;
}
.diceBox > div:nth-child(6) .row{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}